<template>
  <div ref="AppRoot" class="App__root">
    <app-header active="microapp"></app-header>
    <div v-show="loadingState"
      style="height:calc(100% - 64px);width: 100%;display: flex;align-items: center;justify-content: center;">
      <bounce-loading></bounce-loading>
    </div>
    <div v-show="!loadingState" class="App__container" id="qiankun-container"></div>
  </div>
</template>

<script>
import { BounceLoading } from "@zkwq/business";
import '@zkwq/business/dist/css/BounceLoading.min.css'
import AppHeader from './components/AppHeader.vue';
import { registerMicroApps, start } from 'qiankun';
export default {
  name: 'ChinaXivPage',
  components: { BounceLoading,AppHeader },
  data() {
    return {
      loadingState:false
    }
  },
  created() {

  },
  mounted() {
    let _this = this;
    registerMicroApps([
      {
        name: 'reactApp',
        entry: '/child/eprint/',
        container: '#qiankun-container',
        activeRule: '/microapp/eprint/',
        props:{
          clientType:'/microapp/eprint/',
          user:this.user
        },
        loader : (loading) => {
          // console.log('aa',loading)
          // _this.$set(_this,'loadingState', loading)
          // _this.$forceUpdate()
          // console.log(_this.loadingState,'---------')
        }
      }
    ]);
    // 启动 qiankun
    start();
  },
  methods: {
  }
}
</script>

<style scoped lang="scss">
@import '@zkwq/business/dist/var.scss';

.App__root {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: $--color-white;
  .App__container {
    height: calc(100% - 64px);
    overflow: auto;
  }
}

.empty__warp {
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .empty__text {
    color: $--color-text-secondary;

    span {
      cursor: pointer;
      color: $--color-primary;
    }
  }
}
</style>
